<template>
  <div class="second-page">
    <ComTopNum/>
    <div class="center-box">
      <div class="center-box-left">
        <ComNavTab text="应用启动总量分布"/>
        <ComMap echartId="thirdPlacePage" style="width:700px;height:85%;" :data="centerMapData"/>
      </div>
      <div class="center-box-right">
        <ComNavTab text="地域应用启动概览"/>
        <ComBaseEcharts echartId="getOptionsForRankBarRefthird"
                         :options="getOptionsForRankBarRef"
                         :customStyle="{width: '100%', height: '90%'}"/>
      </div>
      </div>
    <div class="bottom-box">
        <ComNavTab text="地域应用启动活跃统计"/>
        <com-table
            style="z-index: 3"
            :isIndex="false"
            :colorKey="['last_30_days_percent','last_7_days_percent','last_1_days_percent']"
            :listData="appStartList"
            :hederTextArray="[
                { title: '地区', width: '12.5%' },
                { title: '累计活跃量', width: '12.5%' },
                { title: '近30天活跃', width: '12.5%' },
                { title: '近30天活跃占比', width: '12.5%' },
                { title: '近7天活跃', width: '12.5%' },
                { title: '近7天活跃占比', width: '12.5%' },
                { title: '昨天活跃量', width: '12.5%' },
                { title: '昨天活跃占比', width: '12.5%' },
            ]"
            :tableTextArray="[
                'region_name',
                'uv_total',
                'last_30_days_region_active_num',
                'last_30_days_percent',
                'last_7_days_region_active_num',
                'last_7_days_percent',
                'last_1_days_region_active_num',
                'last_1_days_percent'
            ]"
            ></com-table>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted,onUnmounted } from "vue";
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComMap from '@/components/public/ComMap.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForRankBar } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComTopNum  from "../components/ComTopNum.vue";
  import { getRegionSum, getTodayRegionSum } from '@/api/sdk/sdk.js'
  import china from '@/json/china.json'

  const intervalId = ref(null);
  const centerMapData = ref([])

  const getOptionsForRankBarRef = ref(getOptionsForRankBar([]))

  //应用启动
  const appStartList = ref([])
  /**
   * 加载地图数据
   */
   const loadMapData = () => {
    getRegionSum().then(res => {
      const { data } = res.data
      const mapData = res.data.data[0].data
      if(data.length > 0 && mapData.length > 0){
        const appSumData = mapData.map(item => {
          return {
            region_name: item.region_name,
            value: item.total_region_startup_num
          };
        });
        appSumData.sort((a, b) => {
          return b.value - a.value
        })
        //上周排行数据--start
          const lastWeekData = mapData.map(item => {
            return{
              name: item.region_name,
              value: item.last_7_days_region_active_num
            }
          })
          lastWeekData.sort((a, b) => {
            return b.value - a.value
          })
          const rank10Start = lastWeekData.slice(0, 10)
          const xRankData = rank10Start.map(v => v.name)
          const yRankData = rank10Start.map(v => v.value)
          getOptionsForRankBarRef.value = getOptionsForRankBar(yRankData, xRankData, '地域应用启动概览')
        //上周排行数据--end
        getTodayRegionSum().then(res => {
          const { data } = res.data
          let mergedData = []
          //地图今日数据为空
          if(!data){
            mergedData = appSumData.map(item => {
              return{
                ...item,
                name: item.region_name,
                today: '0'
              }
            })
          }else {
            mergedData = appSumData.map(item => {
            const todayItem = data.find(v => v.region_name == item.region_name)
            if(todayItem) {
              return {
                ...item,
                  name: todayItem.region_name,
                  // value: item.value,
                  today: todayItem.today_region_startup_num
              }
            }
            }).filter(item => item !== undefined);
          }
          const mapArr = china.features.map(item => {
            return { name: item.properties.name, value: '0', today: '0'}
          })
          mapArr.forEach(v => {
            if(!mergedData.find(item => item.name == v.name)) mergedData.push(v)
          })
          centerMapData.value = mergedData;
          // const rank10Start = mergedData.slice(0, 10)
          // const xRankData = rank10Start.map(v => v.name)
          // const yRankData = rank10Start.map(v => v.value)
          // getOptionsForRankBarRef.value = getOptionsForRankBar([], yRankData, xRankData)
        })
      }
    })
  }  
  onMounted(() => {
    loadMapData()
      getRegionSum().then(res => {
        const mapData = res.data.data[0].data
        mapData.forEach(v=>{
              v.last_1_days_percent = parseFloat(((Number(v.last_1_days_region_active_num)/Number(v.uv_total))*100).toFixed(2))+'%'
              v.last_7_days_percent = parseFloat(((Number(v.last_7_days_region_active_num)/Number(v.uv_total))*100).toFixed(2))+'%'
              v.last_30_days_percent = parseFloat(((Number(v.last_30_days_region_active_num)/Number(v.uv_total))*100).toFixed(2))+'%'
        })
        //按照累计活跃量排序
        mapData.sort((a, b) => {
          return b.uv_total - a.uv_total
        })
        mapData.forEach(v => {

          v.uv_total = Number(v.uv_total).toLocaleString()
          v.last_1_days_region_active_num = Number(v.last_1_days_region_active_num).toLocaleString()
          v.last_7_days_region_active_num = Number(v.last_7_days_region_active_num).toLocaleString()
          v.last_30_days_region_active_num = Number(v.last_30_days_region_active_num).toLocaleString()
        })
        console.log(mapData);
        appStartList.value = mapData
      })
  })
  //5分钟刷新数据-地图/今日应用总量
  intervalId.value = setInterval(() => {
    loadMapData()
  },5 * 1000 * 60)

  onUnmounted(() => {
  // 清除定时器
  if (intervalId.value) {
      clearInterval(intervalId.value);
    }
});    
</script>
<style lang="scss" scoped>
.second-page {
  padding: 0 40px 60px 40px;
  .center-box{
    display: flex;
    height: 500px;
    padding-top: 25px;
    background-image: url('/src/assets/BG2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-left{
      width: 50%;
    }
    &-right{
      width: 50%;
      margin-left:20px;
    }
  }
  .bottom-box{
    // height: 1500px;
  }
}
.actived-style{
  color: #FFD042 !important;
}
</style>
